<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" type="image/ico" href="/static/common/assets/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=edge">

  <title>TSA Online</title>

  <link rel="stylesheet" href="/static/css/fontawesome-5.13/css/all.css">
  <link rel="stylesheet" href="/static/css/adminlte.min.css">
  <link href="/static/css/tabulator.min.css" rel="stylesheet">
  <link href="/static/css/tabulator-fix.css" rel="stylesheet">
  <link rel="stylesheet" href="/static/css/theme.css" media="all">
  <!-- jQuery -->
  <script src="/static/js/jquery-3.js"></script>
  <!-- Bootstrap 4 -->
  <script src="/static/js/bootstrap.bundle.min.js"></script>
  <!-- AdminLTE App -->
  <script src="/static/js/adminlte.min.js"></script>
  <script type="text/javascript" src="/static/js/tabulator.min.js"></script>
  <!-- <script src="/static/js/echarts.js"></script> -->
  <script src="/static/js/echarts.min.js"></script>
</head>


{% if share %}
<div class="modal fade" id="sharePopModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Open Sharing Log</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
	      You are viewing the log file shared from <span class="table-title" >{{ sharefrom }}<span>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
      </div>
    </div>
  </div>
</div>
{% endif %}

<body class="hold-transition sidebar-mini">
<div class="wrapper">

  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="/" class="nav-link">Home</a>
      </li>
    </ul>


    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <!-- Messages Dropdown Menu -->
      <!-- Notifications Dropdown Menu -->
      <li class="nav-item">
        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button"><i
            class="fas fa-th-large"></i></a>
      </li>
      <li class="nav-item dropdown">
          {% if user.is_authenticated %}
	  <a class="nav-link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user" aria-hidden="true"></i> {{ user.username }}</a>
	  <div class="dropdown-menu" style="">
	   <a class="dropdown-item" href="{% url 'logout' %}">Logout</a>
	  </div>
             {% else %}
          <a class="nav-link" href="{% url 'dappx:user_login' %}">Login</a>
             {% endif %}
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <a href="/" class="brand-link">
      <img src="/static/img/remove-bg-icons/log-icon.svg" alt="TSA Online" class="brand-image img-circle elevation-3"
           style="opacity: .8">
      <span class="brand-text font-weight-light">TSA ONLINE</span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar">
      <div class="user-panel pl-3 mt-3 pb-3 mb-3 d-flex">
        <div class="info">
          <a class="d-block" >Analysis Result</a>
        </div>
      </div>

      <!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <li class="nav-item">
            <a href="#" class="nav-link"  onclick="createTab('id0', 'Analysis Report', '/fetch_knownissue/{{ log_id }}', false)"  >
             <img src="/static/img/remove-bg-icons/report.svg" class="col-nav-img" alt="High Memory Detection" > 
             <span class=" nav-text">Analysis Report</span>
            </a>
          </li>

          <li class="nav-item">
            <a href="#" class="nav-link" onclick="createTab('id0', 'Summary', '/fetch_summary/{{ log_id }}', false)"  >
	     <img src="/static/img/remove-bg-icons/information.svg" class="col-nav-img" alt="Summary" > 
             <span class=" nav-text">Environment Info</span>
            </a>
          </li>

	  {% if techsupptype == "nGeniusONE" %}
          <li class="nav-item">
             <a href="#" class="nav-link "  onclick="createTab('id0', 'High memory detection', '/fetch_memory/{{ log_id }}', false)" >
             <img src="/static/img/remove-bg-icons/memory.svg" class="col-nav-img" alt="High Memory Detection"> 
             <span class=" nav-text">High Memory</span>
            </a>
          </li>
	  {% endif %}

          <li class="nav-item">
             <a href="#" class="nav-link "  onclick="createTab('id0', 'Configuration Compare', '/fetch_propdiff/{{ log_id }}', false)" >
             <img src="/static/img/remove-bg-icons/configure.svg" class="col-nav-img" alt="Configure Compare" > 
             <span class="nav-text">Config Compare</span>
            </a>
          </li>

	  {% if techsupptype == "nGeniusONE" %}
           <li class="nav-item">
              <a href="#" class="nav-link "  onclick="createTab('id0', 'Polling Analysis', '/fetch_polling/{{ log_id }}', false)" >
              <img src="/static/img/remove-bg-icons/polling.svg" class="col-nav-img" alt="Polling Analysis" > 
              <span class="nav-text">Polling Analysis</span>
             </a>
           </li>
	  {% endif %}

          <li class="nav-item">
             <a href="#" class="nav-link "  onclick="createTab('id0', 'Log Scan', '/fetch_logscan/{{ log_id }}', false)" >
             <img src="/static/img/remove-bg-icons/scan.svg" class="col-nav-img" alt="Log Scan" > 
             <span class="nav-text">Log Scan</span>
            </a>
          </li>

          <li class="nav-item">
             <a href="#" class="nav-link"  onclick="createTab('id0', 'Template Export', '/fetch_tempexport/{{ log_id }}', false)" >
             <img src="/static/img/remove-bg-icons/export.svg" class="col-nav-img" alt="Template Export" >
             <span class="nav-text">Template Export</span>
            </a>
          </li>

            </ul>
          </li>
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-12 col-md-12 col-xl-12">
            <ol class="breadcrumb ">
		    <!-- <li class="breadcrumb-item"><a>{{filename}}</a></li> -->
		    <li class="breadcrumb-item"><a href="/">Logs</a></li>
		    <li class="breadcrumb-item">{{filename}} 
			    {%if comments %}
			     <!-- <span class="breadcrumb-comments"> -->
			     <i class="fas fa-angle-left"></i> 
			     <span class="text-sm font-italic breadcrumb-comments" >{{comments}} </span>
			     <i class="fas fa-angle-right"></i>  
			     <!-- </span> -->
			    {% endif %}

		    </li>
            </ol>
          </div><!-- /.col -->
          <div class="col-sm-6">
		  <!-- <span class="m-0 text-dark">{{ filename }}</span> -->
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <div class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-12">

          <ul class="nav nav-header-tabs" id="tab-center">
  	  </ul>
  	
	  <hr>
  	  <div class="card mb-10" style="width: 100%; height:70vh;">
  	  <div class="card-body-tab-content" >
            <div id="myTabContent" class="tab-content">
  	    </div>
  	  </div>
  	  </div>
                                                                 

                                            
          </div>
        </div>
        <!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->


  <!-- Main Footer -->
  <footer class="main-footer">
    <strong>Copyright &copy; 2020 Netscout.</strong> All rights reserved.
  </footer>
</div>
<!-- ./wrapper -->


<script>

$(document).ready(function(){

// $('#myModal').modal('show')
$("#sharePopModal").modal('show')

 // create Home tab
createTab('id0', 'Analysis Report', '/fetch_knownissue/{{ log_id }}', false);

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
   $("a.nav-link.active").removeClass("active");
   $("li.tab-header-active").removeClass("tab-header-active")
   $(e.target).closest('li').addClass('tab-header-active');
   var selector=$(e.target).attr('href');
   var myChart=$(selector).children("[id^=main-chart]")
   if (myChart.length > 0)
   {
      myChart.resize();
   }
})

})


function debouncer( func , timeout ) {
   var timeoutID , timeout = timeout || 200;
   return function () {
      var scope = this , args = arguments;
      clearTimeout( timeoutID );
      timeoutID = setTimeout( function () {
          func.apply( scope , Array.prototype.slice.call( args ) );
      } , timeout );
   }
}

function chartReDraw(){
  $("[id^=main-chart]").each(function(index){
  if ($(this).closest("[id^=tab--table]") && $(this).closest("[id^=tab--table]").hasClass("active") ){
    console.log("Window resizing.")
    myChart= echarts.init(this)
    myChart.resize()
  }
  if ($(this).closest("[id^=id0]") && $(this).closest("[id^=id0]").hasClass("active") ){
    console.log("Window resizing.")
    myChart= echarts.init(this)
    myChart.resize()
  }

  })
}

window.onresize = debouncer(function(){
	// change navigation list 
	// resNav()
	// redraw the chart
	 chartReDraw()
       }
)

function createTab(id, header, target, deleteBtn=true){

  if (id=="id0"){
    // console.log("trigger Delete")
    deleteTab(id);
  }
  selector = "#"+id;
  if ($(selector).length < 1) {
	  if (deleteBtn){
		  // tabHeaderHtml= "<li class=\"tab-header-item\">" +"<button " +  "onclick=\"deleteTab('"+ id +"')\" " + " type=\"button\" class=\"tab-close\" data-dismiss=\"toast\" aria-label=\"Close\"><span class=\"text-danger\" aria-hidden=\"true\"><i class=\"fa fa-minus-square \" style=\"font-size:12px\"></i></span></button>"+ " <a class=\"nav-link\" data-toggle=\"tab\" href=\"#" + id + "\"><span class=\"nav-header-text\">" +header + "</span>"+"</a></li>" 
		  tabHeaderHtml= "<li class=\"tab-header-item\">" +"<button " +  "onclick=\"deleteTab('"+ id +"')\" " + " type=\"button\" class=\"tab-close\" data-dismiss=\"toast\" aria-label=\"Close\"><span class=\"text-danger\" aria-hidden=\"true\"><i class=\"fa fa-minus-square\" style=\"font-size:12px\"></i></span></button>"+ " <a class=\"nav-link\" data-toggle=\"tab\" href=\"#" + id + "\"><span class=\"nav-header-text\">" +header + "</span>"+"</a></li>" 
	  } else {
		  tabHeaderHtml= "<li class=\"tab-header-item tab-header-main\"> <a class=\"nav-link \" data-toggle=\"tab\" href=\"#" + id + "\"><span class=\"align-baseline nav-header-text\">" + header + "</span></a></li>" 
	  }
	  if(id=="id0"){
	      $('#tab-center').prepend(tabHeaderHtml);
	  } else {
	      $('#tab-center').append(tabHeaderHtml);
	  }

      $.get(target, function(data, status){
         $('#myTabContent').append(data);
      })

    }; 
    switchTab(id);
};

function switchTab(id){
    // Assert the tab exists.
    selector = "#"+id;
	// console.log("switch->"+id)
    // Remove active attributes for current tab
    $("a.nav-link.active").removeClass("active");
    $("li.tab-header-active").removeClass("tab-header-active")
    $("#tab-center li a").each(
        function() {
            if (this.attributes.href.nodeValue == selector) {
                // Add "active" class for the tab.
                $(this).addClass("active");
		// Change tab color
		$(this).parent().addClass("tab-header-active");
               }
            }
     )
     // Switch tab content.
     $("#myTabContent div.tab-pane-global.active.show").removeClass("active show");
     $(selector).addClass("active show");
};



function getActiveId(){
  return $('#myTabContent div.tab-pane-global.active.show').attr('id')
}

function deleteTab(id) {
    // console.log(id)

    selector = "#"+id;
    activeId = getActiveId();

    if (activeId == id) {
	// console.log("active id")
      allIds = getAllIds();
      nextId = getNextTabId(allIds, id);
      // console.log("nextid:"+nextId)
      switchTab(nextId);
      removeOneTab(id);
    } else {
       // console.log("inactive id")
       removeOneTab(id);		
    }
};

function removeOneTab(id){
    selector = "#"+id;
    $("#tab-center li a").each(function() {
        if (this.attributes.href.nodeValue == selector) {
            $($(this)[0].parentNode).remove();
        };
    })
    $(selector).remove();
};

function getAllIds(){
    var array = new Array();
    $('#myTabContent div.tab-pane-global').each(function(){
        array.push($(this).attr('id')); 
    });
    return array
};

// follow the usage of tab like in browser.
function getNextTabId(array, id){
    currIndex = array.indexOf(id);
    var nextIndex;
    if (currIndex < array.length -1){
       nextIndex= currIndex + 1 
    } else {
       nextIndex= currIndex - 1 
    }
    return array[nextIndex]
};
</script>


</body>
</html>

